<script setup>
import { ref,onMounted } from 'vue';
import {getList} from "@/boot/rest.js";
import RestCard from "@/components/RestCard.vue";
import {useRouter} from "vue-router";
const router = useRouter()
const rest = ref([])
onMounted(() => {
  getList({}).then(res=>{
    rest.value = res.data.data
  })
})
const goToDetail = (id) => {
  router.push({path: `/detail`,query: {id:id}})
}
</script>

<template>
  <div class="w-full h-full">
    <div class="w-2/3 m-auto">
      <h1 class="text-4xl font-bold text-center mt-10">餐厅</h1>
    </div>
    <div class="w-2/3 m-auto grid grid-cols-3 gap-5 gap-y-10">
      <div v-for="item in rest" class="mt-10" >
        <RestCard @click="goToDetail(item.id)" class="hover:cursor-pointer"  :name="item.name" :picUrl="item.picUrl" :foodType="item.foodType" :location="item.location" />
      </div>
    </div>
  </div>
</template>
